<template>
  <div class="login">
    <!--顶部-->
    <img src="../common/images/lattern.png" class="login-top">
    <div class="login-content">
      <p class="login-title">登录</p>
      <div class="login-input">
        <input type="text" placeholder="请输入您开通实体卡时填写的手机号" v-model="phone">
      </div>
      <!--登录按钮-->
      <img src="../common/images/login.png" class="login-button" @click="login(phone)">
      <p class="login-hint">
        <img src="../common/images/tan.png" alt="">
        无法正常登陆请返回微信公众号 会员中心“注册/登陆”菜单进行修改
      </p>
    </div>
    <!--底部-->
    <img src="../common/images/bottom.png" class="login-bottom">
    <div class="toast" v-if="flag">
      <div class="toast-content">
        <p class="toast-hint">请输入手机号</p>
        <img src="../common/images/toast_close.png" class="toast-close" @click="popClose">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        phone: '', // 手机号
        flag: true // 弹框
      }
    },
    methods: {
      login(phone) {
        alert(phone)
      },
    //  关闭弹窗
      popClose() {
        this.flag = false
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import '../common/stylus/base.styl'
  .login
    width 100vw
    min-height 100vh
    position relative
    background url('../common/images/index_bg.png') repeat 100% 100%
    overflow hidden

  .login-top
    width 100vw
    height auto
    display block
    position absolute
    top 0

  .login-bottom
    width 100vw
    height auto
    display block
    position absolute
    bottom 0
  .login-content
    position relative
    z-index 2
    width 100%
    padding 0 vw(60)
    margin-top vw(214)
    margin-bottom vw(260)
    text-align center
  .login-title
    width 100%
    font-size vw(40)
    color #e21720
    margin-bottom vw(137)

  .login-input
    width 100%
    height vw(96)
    background-image url('../common/images/border.png')
    @extend .back-image
    padding vw(14)
    input
      width 100%
      height 100%
      border 0
      outline none
      font-size vw(28)
    input::-webkit-input-placeholder
      color #ffd1ad
  .login-input:nth-of-type(2)
     margin-top vw(42)
  .login-button
    width vw(235)
    height auto
    margin-top vw(70)
    margin-bottom vw(100)
  .login-hint
    width 100%
    padding 0 vw(10)
    font-size vw(22)
    color #565555
    line-height 150%
    img
      width vw(26)
      vertical-align middle
  .toast
    width 100%
    position fixed
    top 0
    bottom 0
    left 0
    right 0
    z-index 10
    background-color rgba(0,0,0,.6)
    .toast-content
      width vw(542)
      height vw(243)
      background-image url('../common/images/pop_bg.png')
      @extend .back-image
      position absolute
      top 50%
      left 50%
      margin-left vw(-271)
      margin-top vw(-122)
      text-align center
      .toast-hint
        font-size vw(30)
        margin-top vw(80)
      .toast-close
        width vw(158)
        height vw(46)
        margin-top vw(40)
</style>
